<template>
  <div class="wrap">
    <div class="wrap-l">
      <div class="cell-l">
        <div class="title-l">
          <span class="t-l">
            <img src="../assets/images/info.png" />
            <span>个人信息</span>
          </span>
          <img src="../assets/images/down-fff.png" />
        </div>
        <div class="box">
          <span class="info-l">姓名：</span>
          <span class="border-b">
            <el-input placeholder="（必填）" v-model.trim="name" clearable size="mini"></el-input>
          </span>
        </div>
        <div class="box">
          <span class="info-l">性别：</span>
          <span>
            <el-radio-group v-model.trim="sex">
              <el-radio-button label="男"></el-radio-button>
              <el-radio-button label="女"></el-radio-button>
            </el-radio-group>
          </span>
        </div>
        <div class="box">
          <span class="info-l">年龄：</span>
          <span>
            <el-input
              type="number"
              min="12"
              max="100"
              placeholder="（必填）"
              v-model.trim="age"
              clearable
              size="mini"
            ></el-input>
          </span>
        </div>
        <div class="box">
          <span class="info-l">现居住地：</span>
          <span>
            <el-input placeholder="（必填）" v-model.trim="address" clearable size="mini"></el-input>
          </span>
        </div>
        <div class="box">
          <span class="info-l">电话：</span>
          <span>
            <el-input placeholder="（必填）" type="number" v-model.trim="tel" clearable size="mini"></el-input>
          </span>
        </div>
        <div class="box">
          <span class="info-l">邮箱：</span>
          <span>
            <el-input v-model.trim="email" clearable size="mini"></el-input>
          </span>
        </div>
      </div>
      <div class="cell-l">
        <div class="title-l">
          <span class="t-l">
            <img src="../assets/images/flag.png" />
            <span>求职意向</span>
          </span>
          <img src="../assets/images/down-fff.png" />
        </div>
        <div>
          <span class="info-l">求职意向：</span>
          <span>
            <!-- <select @change="indexSelect01" v-model="indexId">
              <option
                :value="indexId"
                v-for="(item,indexId) in positionList"
                :key="indexId"
              >{{item.listName}}</option>
            </select>
            <select v-model="indexId2" @change="indexSelect02()">
              <option :value="indexId2" v-for="(k,indexId2) in select02" :key="indexId2">{{k}}</option>
            </select>-->
            <!-- <el-cascader :options="options" :show-all-levels="false"></el-cascader> -->
            <el-cascader :options="options" v-model="selectedOptions" size="mini"></el-cascader>
          </span>
        </div>
        <div>
          <span class="info-l">到岗时间：</span>
          <span>
            <label @click="getArrival(item)" v-for="(item,index) in arrivalList" :key="index">
              <input type="radio" name="arrival" />
              {{item}}&nbsp;
            </label>
          </span>
        </div>
        <div>
          <span class="info-l">目标地点：</span>
          <!-- <span>
            <input type="text" @click="changeArea" v-model="area" />
            <van-popup v-model="areaFlag">
              <van-area
                :area-list="areaList"
                :columns-num="3"
                title="地区"
                value="440100"
                @cancel="changeVanShow"
                @confirm="setArea"
              />
            </van-popup>
          </span>-->
        </div>
        <div>
          <span class="info-l">期望月薪：</span>
          <span>
            <input type="number" min="0" v-model.trim="wages" />元
          </span>
        </div>
      </div>
    </div>
    <div class="wrap-r">
      <div class="cell-r">
        <div class="title-r">
          <span class="r-l">
            <img src="../assets/images/lately.png" />
            <span>最近工作</span>
          </span>
          <img src="../assets/images/down-p.png" />
        </div>
        <div>
          <span>公司：</span>
          <span>
            <input type="text" v-model.trim="company" />
          </span>
        </div>
        <div>
          <span>行业：</span>
          <span>
            <input type="text" v-model.trim="industry" />
          </span>
        </div>
        <div>
          <span>时间起止：</span>
          <span>
            <input type="text" v-model.trim="SASTime" />
            <!-- <input type="number" oninput="if(value.length>4)value=value.slice(0,4)"> -->
          </span>
        </div>
        <div>
          <span>离职原因：</span>
          <span>
            <input type="text" v-model.trim="leaving" />
          </span>
        </div>
        <div>
          <div>工作内容：</div>
          <div>
            <textarea v-model="jobContent"></textarea>
          </div>
        </div>
      </div>
      <div class="cell-r">
        <div class="title-r">
          <span class="r-l">
            <img src="../assets/images/education.png" />
            <span>最高学历</span>
          </span>
          <img src="../assets/images/down-p.png" />
        </div>
        <div>
          <span>学校：</span>
          <span>
            <input type="text" v-model.trim="school" />
          </span>
        </div>
        <div>
          <span>学历：</span>
          <span>
            <input type="text" v-model.trim="education" />
          </span>
        </div>
        <div>
          <span>专业：</span>
          <span>
            <input type="text" v-model.trim="major" />
          </span>
        </div>
      </div>
      <div class="cell-r">
        <div class="title-r">
          <span class="r-l">
            <img src="../assets/images/experience.png" />
            <span>工作经验（至少填一行）</span>
          </span>
          <img src="../assets/images/down-p.png" />
        </div>
        <div>
          <span>
            职能：
            <input type="text" v-model.trim="function1" />
          </span>
          <span>
            时长：
            <input type="text" v-model.trim="duration1" />
          </span>
        </div>
        <div>
          <span>
            职能：
            <input type="text" v-model.trim="function2" />
          </span>
          <span>
            时长：
            <input type="text" v-model.trim="duration2" />
          </span>
        </div>
        <div>
          <span>
            职能：
            <input type="text" v-model.trim="function3" />
          </span>
          <span>
            时长：
            <input type="text" v-model.trim="duration3" />
          </span>
        </div>
      </div>
      <div class="cell-r">
        <div class="title-r">
          <span class="r-l">
            <img src="../assets/images/certificate.png" />
            <span>作品证书技能</span>
          </span>
          <img src="../assets/images/down-p.png" />
        </div>
        <div>
          <span>
            <input type="text" v-model.trim="skill1" />
          </span>
          <span>
            <input type="text" v-model.trim="skill2" />
          </span>
          <span>
            <input type="text" v-model.trim="skill3" />
          </span>
        </div>
      </div>
    </div>
    <button @click="save">保存简历</button>
  </div>
</template>

<script>
import areaListJS from "../assets/js/area.js";
import position from "../assets/js/elposition.js";
import API from "../api/api.js";
export default {
  data() {
    return {
      options: position.position_list,
      selectedOptions: [],
      skill3: null,
      skill2: null,
      skill1: null,
      duration3: null,
      duration2: null,
      duration1: null,
      function3: null,
      function2: null,
      function1: null,
      school: null,
      jobContent: null,
      leaving: null,
      SASTime: null,
      industry: null,
      company: null,
      wages: null,
      area: "广州",
      areaFlag: false,
      areaList: areaListJS,
      arrival: null,
      arrivalList: ["即日", "一个月内", "待定"],
      email: null,
      tel: null,
      address: null,
      age: null,
      sex: "女",
      // indexId: 0,
      // indexId2: 0,
      focus: null,
      education: null,
      major: null,
      // positionList: position.position_list,
      // select02: position.position_list[0].list,
      name: null
    };
  },
  components: {},
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      if (!this.$store.state.id || !this.$store.state.token) {
        this.$router.push({
          path: "login"
        });
      }
    },
    // indexSelect01() {
    //   this.select02 = this.positionList[this.indexId].list;
    // },
    // indexSelect02() {
    //   this.focus = this.positionList[this.indexId].list[this.indexId2];
    // },
    // getSex(e) {
    //   this.sex = e;
    // },
    getArrival(e) {
      this.arrival = e;
    },
    changeArea() {
      this.areaFlag = true;
    },
    changeVanShow() {
      this.areaFlag = false;
    },
    setArea(e) {
      this.areaFlag = false;
      this.area = e[1].name + "-" + e[2].name;
    },
    save() {
      if (!this.name) {
        this.$message("请检查姓名");
        return;
      }
      if (!this.sex) {
        this.$message("请检查性别");
        return;
      }
      if (this.age < 18 || this.age > 100) {
        this.$message("请检查年龄");
        return;
      }
      if (!this.address) {
        this.$message("请检查地址");
        return;
      }
      if (!/^1[34578]\d{9}$/.test(this.tel)) {
        this.$message("请检查电话");
        return;
      }
      if (
        !/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g.test(
          this.email
        )
      ) {
        this.$message("请检查邮箱");
        return;
      }
      if (!this.arrival) {
        this.$message("请检查到岗时间");
        return;
      }
      if (!this.area) {
        this.$message("请检查目标地点");
        return;
      }
      if (!this.wages) {
        this.$message("请检查期望月薪");
        return;
      }
      if (!this.company) {
        this.$message("请检查最近公司");
        return;
      }
      if (!this.industry) {
        this.$message("请检查最近行业");
        return;
      }
      if (!this.SASTime) {
        this.$message("请检查起止时间");
        return;
      }
      if (!this.leaving) {
        this.$message("请检查离职原因");
        return;
      }
      if (!this.jobContent) {
        this.$message("请检查工作内容");
        return;
      }
      if (!this.school) {
        this.$message("请检查学校");
        return;
      }
      if (!this.education) {
        this.$message("请检查学历");
        return;
      }
      if (!this.major) {
        this.$message("请检查专业");
        return;
      }
      if (!this.function1) {
        this.$message("请检查职能一");
        return;
      }
      if (!this.duration1) {
        this.$message("请检查时长一");
        return;
      }
      API.resume_keeping(
        this.$store.state.id,
        this.name,
        this.sex,
        this.age,
        this.address,
        this.tel,
        this.email,
        this.focus,
        this.arrival,
        this.area,
        this.wages,
        this.company,
        this.industry,
        this.SASTime,
        this.leaving,
        this.jobContent,
        this.school,
        this.education,
        this.major,
        this.function1,
        this.duration1,
        this.function2,
        this.duration2,
        this.function3,
        this.duration3,
        this.skill1,
        this.skill2,
        this.skill3
      ).then(res => {
        if (res.data.code == 1) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          this.$router.push({ name: "myResume" });
        }
        if (res.data.code == 0) {
          this.$message({
            message: res.data.msg
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.box {
  display: flex;
  align-items: center;
}
.wrap {
  width: 100%;
  padding: 0.1rem 10%;
  background: #efefef;
  display: flex;
}
.wrap-l {
  width: 30%;
  padding: 2rem;
  background: #ab47bc;
}
.cell-l {
  margin-top: 2rem;
}
.cell-l div {
  padding: 0.2rem 0;
}
.title-l {
  margin-bottom: 0.6rem;
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.01rem solid #fff;
}
.title-l img {
  width: 1.2rem;
  height: 1.2rem;
}
.t-l {
  display: flex;
  align-items: center;
}
.wrap-r {
  width: 35%;
  padding: 1.2rem 2rem;
  background: #e1bee7;
}
.cell-r {
  margin-bottom: 1rem;
}
.title-r {
  margin-bottom: 0.2rem;
  color: #800080;
  font-size: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.01rem solid #800080;
}
.cell-l div {
  padding: 0.1rem 0;
}
.title-r img {
  width: 1rem;
  height: 1rem;
}
input {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 0.01rem solid #fff;
}
.wrap-l input {
  background: #ab47bc;
}
.wrap-r input {
  background: #e1bee7;
}
</style>
